/*
  学习目标：通过数组的map方法， 实现列表渲染
  key口诀: 💥有id用id, 没有id用索引
*/

import React from 'react';
import ReactDOM from 'react-dom';

const list = ['苹果', '橘子', '香蕉'];

const liNodes = list.map((item, index) => {
  return <li key={index}>{item}</li>;
});

const divNode = (
  <>
    <ul>{liNodes}</ul>
    <ul>
      {list.map((item, index) => {
        return <li key={index}>{item}</li>;
      })}
    </ul>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
